﻿@{
    ViewData["Title"] = "Home Page";
}

    <div class="container">
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-2">toUser</div>
            <div class="col-4"><input type="text" id="toUserInput" /></div>
        </div>
        <div class="row">
            <div class="col-2">Message</div>
            <div class="col-4"><input type="text" id="messageInput" /></div>
        </div>
        <div class="row">&nbsp;</div>
        <div class="row">
            <div class="col-6">
                <input type="button" class="btn btn-primary" id="sendButton" value="Send Message" />
            </div>
        </div>
    </div>
<div class="row">
    <div class="col-12">
        <hr />
    </div>
</div>
<div class="row">
    <div class="col-6">
        <ul id="messagesList"></ul>
    </div>
</div>


@section scripts{
    <script>
        var connection = initconnection();

        document.getElementById("sendButton").addEventListener("click", function (event) {
            var toUser = document.getElementById("toUserInput").value;
            var message = document.getElementById("messageInput").value;
            $.ajax({
                url: '/api/User/SendMessage',
                data: {
                    toUser: toUser,
                    message: message
                },
                headers: {
                    "Authorization": "Bearer " + localStorage.getItem("token")
                },
                contentType: "application/json",
                success: function (d) {
                    console.log(d)
                }
            })
            //connection.invoke("SendMessage", user, message).catch(function (err) {
            //    return console.error(err.toString());
            //});
            event.preventDefault();
        });
    </script>
}